<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 110报警 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="container">
		<view class="container-header">
			<view class="header-title">遇到危险，请向警方求助</view>
			<view class="header-subtitle">谎报警情将被依法追究法律责任</view>
		</view>
		<view class="container-main">
			<view class="main-card">
				<view class="card-title">当前参考位置</view>
				<view class="card-value" v-if="locationStatus == 1">{{addressInfo.address}}</view>
				<view class="card-value" v-else-if="locationStatus == 2">获取位置失败，<text :style="{color: themeColor}" @click="getAuthSetting()">点击重试</text></view>
				<view class="card-value" v-else>正在获取当前位置...</view>
			</view>
			<view class="main-info">
				<view class="info-title">当您报警后，平台会尝试：</view>
				<view class="info-list">
					<view class="list-item">通知紧急联系人</view>
					<view class="list-item">将行程信息根据警方要求提供给警方</view>
					<view class="list-item">整理行程录音供警方查询</view>
				</view>
			</view>
			<view class="safe-padding"></view>
		</view>
		<view class="container-footer">
			<view class="footer-label flex flex-center" @click.stop="toAgreement()">
				<text class="label-text">点击查看功能说明</text>
				<image class="label-icon" src="/static/arrow_right.png" mode="aspectFit"></image>
			</view>
			<view class="footer-btn" @click="handleAlarm()">呼叫110</view>
			<view class="safe-padding"></view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
	export default {
		data() {
			return {
				// 地址信息
				addressInfo: {},
				// 定位状态：1.定位成功，2.定位失败，3.正在定位
				locationStatus: 3,
				// 是否重新定位
				isResetLocation: false,
			}
		},
		computed: {
			...mapState({
				tencentMapKey: state => state.app.tencentMapKey,
				themeColor: state => state.app.themeColor,
			})
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			this.getAuthSetting(() => {
				uni.hideLoading()
			})
		},
		onShow() {
			if (this.isResetLocation) {
				this.isResetLocation = false
				this.getAuthSetting()
			}
		},
		methods: {
			// 获取位置权限
			async getAuthSetting(fn) {
				this.locationStatus = 3
				try {
					const permissionStatus = await this.$util.checkLocationPermission()
					if (permissionStatus == 1) {
						this.getLocation(fn)
					} else {
						if (fn) fn()
						this.$util.setLocationPermission(permissionStatus, (result) => {
							if (result) {
								// #ifdef MP-WEIXIN
								this.getLocation()
								// #endif
								// #ifdef APP
								this.isResetLocation = true
								// #endif
							} else {
								this.locationStatus = 2
							}
						})
					}
				} catch (error) {
					this.locationStatus = 2
					if (fn) fn()
					uni.showToast({
						title: error.message,
						icon: 'none',
						duration: 2000,
					})
				}
			},
			// 获取位置信息
			getLocation(fn) {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (result) => {
						let qqmapsdk = new QQMapWX({
							key: this.tencentMapKey
						})
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: result.latitude,
								longitude: result.longitude
							},
							success: (res) => {
								this.addressInfo = {
									latitude: res.result.location.lat,
									longitude: res.result.location.lng,
									address: res.result.formatted_addresses.standard_address
								}
								this.locationStatus = 1
								if (fn) fn()
							},
							fail: (err) => {
								this.locationStatus = 2
								if (fn) fn()
								uni.showToast({
									title: '位置获取失败',
									icon: "none",
									duration: 2000
								})
								console.error(err)
							}
						})
					},
					fail: (err) => {
						this.locationStatus = 2
						if (fn) fn()
						uni.showToast({
							title: '位置获取失败',
							icon: "none",
							duration: 2000
						})
						console.error(err)
					}
				});
			},
			// 跳转协议
			toAgreement() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/driver/mine/security/agreement?type=2",
				})
			},
			// 呼叫110
			handleAlarm() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.$util.request("main.alarm.submit", {
					source: 2,
					help_location: this.addressInfo.address,
					lat: this.addressInfo.latitude,
					lng: this.addressInfo.longitude,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.$util.toPage({
							mode: 6,
							phone: "110",
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('110报警 ', error)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}

	.container {
		padding-bottom: 188rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.container-header {
			padding: 40rpx 48rpx;
			background: linear-gradient(187deg, #DE2828 5.31%, #FF7373 94.66%);

			.header-title {
				color: #FFF;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 44rpx;
				text-align: center;
			}

			.header-subtitle {
				margin-top: 16rpx;
				color: #FFF;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.container-main {
			padding: 40rpx 32rpx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.main-card {
				padding: 32rpx 48rpx;
				border-radius: 32rpx;
				background: #FFF;

				.card-title {
					color: #8D929C;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.card-value {
					margin-top: 16rpx;
					color: #242629;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}
			}

			.main-info {
				margin-top: 48rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				.info-title {
					color: #242629;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.info-list {
					margin-top: 16rpx;

					.list-item {
						color: #8D929C;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;

						&::before {
							display: inline-block;
							content: "·";
							font-size: 24rpx;
							color: #8D929C;
							margin-right: 16rpx;

						}
					}
				}
			}
		}

		.container-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx 24rpx 16rpx;
			background: #FFF;
			z-index: 98;

			.footer-label {
				.label-text {
					color: #242629;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.label-icon {
					margin-left: 16rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}

			.footer-btn {
				margin-top: 32rpx;
				color: #FFF;
				text-align: center;
				font-size: 28rpx;
				font-weight: 600;
				line-height: 40rpx;
				border-radius: 40rpx;
				background: #DE2828;
				padding: 20rpx 32rpx;
			}
		}
	}
</style>